<template>
  <!-- {{ $router.options.routes }} -->
  <!-- <div v-for="item in $router.options.routes">
    <p>{{ item.meta.title }}</p>

  </div> -->


  <!-- <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p> -->
  <!-- <router-link to="/">首页</router-link>
  <router-link to="/about">内容标签</router-link> -->
  <div class="footer_wrap">
    <router-link to="/find">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friend">关注</router-link>
    <!-- <router-link to="/parent?name=薛之谦">音乐人</router-link> -->
 
    <!-- <router-link to="/parent/刀郎">音乐人刀郎-</router-link> -->
    <span @click="oneBtn">朋友-小蔚</span> &nbsp;
    <span @click="twoBtn">朋友-大奔</span>
  </div>
  <button @click="btn" class="btnclass">跳转到关注页面</button>
  <div class="content">
    <!-- <a href="/">首页</a>
    <a href="#/about">内容标签</a> -->
    <RouterView />
  </div>
  <br>
  <!--所有路由的总出口 主要用来展示内容-->
  <!-- <router-view></router-view> -->

</template>
<script setup>
import { useRouter } from 'vue-router';
// import router from './router';
const router=useRouter()
const btn = () => { 
  //组合式api 不包含 this关键字
  // this.$router.push({path:'/friend'})
  router.push({path:'/friend'})
}

const oneBtn = () => { 
  router.push({ name: 'parent', query: { name: '小蔚' } })
  
}
const twoBtn = () => { 
  router.push({ name: 'parent', params: { username: '大奔' } })
}


</script>
<style scoped>
a{
  /* 去掉a标签下划线 */
  text-decoration: none;
  padding-left: 10px;
  margin-left: 10px;
}
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}

.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

.footer_wrap a:hover {
  background-color: #555;
}

.content {
  padding-top: 62px;
}
.btnclass{
  margin-top: 60px;
}
</style>
